<template>
  <form-item-wrapper :field="field">
    <el-input
      :disabled="field.disabled"
      v-model="field.answer"
      @change="handelChange"
      clearable
    >
      <template #append v-if="field.unit">
        <el-button>
          <div>{{ field.unit }}</div>
        </el-button>
      </template>
    </el-input>
  </form-item-wrapper>
</template>
<script lang="ts" setup>
import FormItemWrapper from "./form-item-wrapper.vue";
import { PropType } from "vue";
import QuestionType from "@bis/types/question";

const props = defineProps({
  field: Object as PropType<QuestionType>,
  colIdx: Number,
});

const emits = defineEmits<{
  (e: "answerChange", field, colIdx): void;
}>();

const handelChange = () => {
  emits("answerChange", props.field, props.colIdx);
};
</script>
